<template>
  <!-- 添加留言的表 -->
  <div style="margin-top: 60px; margin-left: 100px">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户" prop="users">
        <el-select v-model="userId" placeholder="请选择用户">
          <template v-for="(item, index) in ruleForm.users">
            <el-option
              :key="index"
              :label="item.nickName"
              :value="item._id"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" prop="goods">
        <el-select v-model="articleId" placeholder="请选择商品">
          <template v-for="(item, index) in ruleForm.goods">
            <el-option
              :key="index"
              :label="item.name"
              :value="item._id"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="留言内容">
        <textarea cols="30" rows="3" v-model="content"></textarea>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { get as get_users } from "../../api/users.js";
import messageApi from "../../api/message.js";
import goodsApi from "../../api/goods.js";

export default {
  data() {
    return {
      ruleForm: {
        users: [],
        goods: [],
      },
      rules: {
        users: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        goods: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      tableData: [],
      content: "",
      time: "",
      articleId: "",
      userId: "60a353bad1daad0ae81d7138",
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    //获取留言信息
    get() {
      messageApi.getAll().then((res) => {
        this.tableData = res;
      });
    },
    async getUser() {
      get_users({ page: 1, limit: 30 }).then((res) => {
        console.log(res);
        this.ruleForm.users = res.rows;
      });
      let { rows } = await goodsApi.get({
        page: 1,
        limit: 20,
        query: {},
        sort: {},
      });
      this.ruleForm.goods = rows;
      console.log(this.ruleForm);
    },
    //添加留言信息
    add() {},
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const message = {
            articleId: this.articleId,
            userId: this.userId,
            content: this.content,
            //留言时间
            time: new Date().getTime(),
          };
          console.log(message);
          (this.content = ""), messageApi.addmessage(message).then((res) => {});
          //获取添加后的所有留言信息
          this.get();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style></style>
